async function fetchAndDisplayIPs() {
    try {
        const response = await fetch('/api/get_latest_ips');
        const data = await response.json();
        
        // 显示IPv4地址
        const ipv4List = document.getElementById('ipv4-list');
        if (ipv4List) {
            ipv4List.innerHTML = '';
            if (data.ipv4 && data.ipv4.length > 0) {
                data.ipv4.forEach(ip => {
                    const li = document.createElement('li');
                    li.className = 'flex items-center justify-between p-2 hover:bg-gray-50 rounded';
                    li.innerHTML = `
                        <span class="font-mono">${ip}</span>
                        <button onclick="copyToClipboard('${ip}')" 
                                class="ml-2 px-3 py-1 text-sm text-blue-600 hover:text-blue-800">
                            复制
                        </button>
                    `;
                    ipv4List.appendChild(li);
                });
            } else {
                ipv4List.innerHTML = '<li class="text-gray-500">暂无 IPv4 地址</li>';
            }
        }

        // 显示IPv6地址
        const ipv6List = document.getElementById('ipv6-list');
        if (ipv6List) {
            ipv6List.innerHTML = '';
            if (data.ipv6 && data.ipv6.length > 0) {
                data.ipv6.forEach(ip => {
                    const li = document.createElement('li');
                    li.className = 'flex items-center justify-between p-2 hover:bg-gray-50 rounded';
                    li.innerHTML = `
                        <span class="font-mono">${ip}</span>
                        <button onclick="copyToClipboard('${ip}')" 
                                class="ml-2 px-3 py-1 text-sm text-blue-600 hover:text-blue-800">
                            复制
                        </button>
                    `;
                    ipv6List.appendChild(li);
                });
            } else {
                ipv6List.innerHTML = '<li class="text-gray-500">暂无 IPv6 地址</li>';
            }
        }

        // 更新修改时间
        const modificationDate = document.getElementById('modification-date');
        if (modificationDate && data.timestamp) {
            modificationDate.textContent = `最后更新: ${data.timestamp}`;
        }

    } catch (error) {
        console.error('获取IP数据失败:', error);
        // 错误提示
        const ipv4List = document.getElementById('ipv4-list');
        const ipv6List = document.getElementById('ipv6-list');
        if (ipv4List) ipv4List.innerHTML = '<li class="text-red-500">获取数据失败</li>';
        if (ipv6List) ipv6List.innerHTML = '<li class="text-red-500">获取数据失败</li>';
    }
}

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        showToast('已复制到剪贴板');
    }).catch(() => {
        showToast('复制失败');
    });
}

function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'fixed bottom-4 right-4 bg-black/70 text-white px-4 py-2 rounded-lg backdrop-blur-sm';
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 2000);
}

// 页面加载时获取IP
document.addEventListener('DOMContentLoaded', fetchAndDisplayIPs);

// 每5分钟刷新一次
setInterval(fetchAndDisplayIPs, 5 * 60 * 1000); 